<template>
  <div class="matrix-view">
    <div ref="wrapper" v-loading="loading" class="panel-wrapper">
      <PanelPreview
        v-if="!loading"
        :component-data="componentData"
        :canvas-style-data="componentStyle"
        :show-type="'width'"
        :panel-info="panelInfo"
        :enable-active="false"
        :show-position="showPosition"
      />
    </div>
  </div>
</template>
<script>
import { findOne as requestGetPanel } from '@/api/panel/panel'
import { panelDataPrepare } from '@/components/canvas/utils/utils'

import PanelPreview from '@/components/canvas/components/editor/Preview'

export default {
  name: 'MatrixView',
  components: { PanelPreview },
  props: {
    matrixId: { type: [String, Number], default: '' },
    panelId: { type: [String, Number], default: '' },
    showPosition: { type: String, default: 'in:grid' },
  },
  data() {
    return {
      loading: false,
      canvasId: 'canvas-main',
      componentData: [],
      componentStyle: {},
      panelInfo: {},
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    refresh() {
      this.loading = true
      this.loadData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    async loadData() {
      try {
        const { success, data } = await requestGetPanel(this.panelId)
        if (!success) {
          return
        }
        const panelData = JSON.parse(data.panelData)
        const panelStyle = JSON.parse(data.panelStyle)
        this.panelInfo = {
          id: data.id,
          name: data.name,
          privileges: data.privileges,
          sourcePanelName: data.sourcePanelName,
          status: data.status,
          createBy: data.createBy,
          createTime: data.createTime,
          creatorName: data.creatorName,
          updateBy: data.updateBy,
          updateName: data.updateName,
          updateTime: data.updateTime,
          watermarkOpen: false,
          watermarkInfo: {},
        }
        this.initMatrixView(panelData, panelStyle)
        panelDataPrepare(panelData, panelStyle, this.initMatrixView)
      } catch (error) {
        console.log('error=', error)
      }
    },
    initMatrixView({ componentData, componentStyle }) {
      let width = this.$refs.wrapper && this.$refs.wrapper.clientWidth
      let height = this.$refs.wrapper && this.$refs.wrapper.clientHeight

      width = width < 100 ? 100 : width
      height = height < 50 ? 50 : height

      for (const item of componentData || []) {
        // 固定视图的大小，避免显示不完整
        item.style.width = width
        item.style.height = height
        item.style.left = 0
        item.style.top = 0
        item.x = 1
        item.y = 1
        item.sizex = 140
        item.sizey = 72
        item.panelId = this.panelId
      }
      this.componentData = componentData
      if (componentStyle) {
        componentStyle.width = width
        componentStyle.height = height
      }
      this.componentStyle = componentStyle
    },
  },
}
</script>
<style lang="scss" scoped>
.matrix-view {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;

  .panel-wrapper {
    width: 100%;
    height: 100%;
  }
}
</style>
